<template xmlns="">


  <div style="display: flex;flex-direction: column;width:100%;height:100%;text-align: -webkit-auto;">

    <div style="height:10%;" class="yi">
      <van-icon
      name="arrow-left"
      fixed="true"
      @click="fanhui"></van-icon>
      <div>
        <van-icon
          name="shop-o"></van-icon>

        <span class="yiyi">帮我送</span>
        <van-icon
          name="arrow-down"></van-icon>
      </div>
      <van-icon
        name="chat"></van-icon>
    </div>

    <div style="border:1px solid #ccc;width:160px;height:200px;background:#fff;position:absolute;    top: 8%; left: 32%; z-index: 1;">

      <div style="border-bottom:1px solid #ccc;height:50px;line-height: 50px;text-align: center">
        <van-icon
          name="cart-o"
          size="20px"></van-icon>
        <router-link to="/bwmfb">
          <span style="    margin-left: 25%;">帮我买</span>
        </router-link>
      </div>

      <div style="height:50px;line-height: 50px;text-align: center">
        <van-icon
          name="send-gift-o"
          size="20px"></van-icon>
        <router-link to="bwqfb">
          <span style="    margin-left: 25%;">帮我取</span>
        </router-link>
      </div>

      <div style="height:50px;line-height: 50px;text-align: center;border-bottom:1px solid #ccc">
        <van-icon
          name="clock-o"
          size="20px"></van-icon>
        <router-link to="bpdfb">
        <span style="    margin-left: 25%;">帮排队</span>
        </router-link>
      </div>

      <div style="height:50px;line-height: 50px;text-align: center">
        <van-icon
          name="like-o"
          size="20px"></van-icon>
        <router-link to="/bbmfb">
        <span style="    margin-left: 25%;">帮帮忙</span>
        </router-link>
      </div>

    </div>

    <div style="flex: 1;overflow-y: auto;" class="er">
      <div class="eryi"  style="font-size: 12px;">
        <div class="er21">取货地址</div>
      </div>

      <div class="erer">
        <div style="display: flex;">

          <div class="er22">收货地址</div>
        </div>
      </div>

      <div class="ersi">
        <input type="text" placeholder="取货时间：" class="qusj" >
        <span style="border:0;height:58px;color:#ccc;margin-top: 5%;display: inline-block">设置人员去哪里拿东西
        </span>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erwu">
        <input type="text" placeholder="送到时间设置：" class="sdsj" >
        <span style="border:0;height:58px;color:#ccc;display: inline-block;margin-top: 5%;">最低实时限取货后1个小时
        </span>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erliu">
        <p style="font-size: 15px;margin: 0;padding: 0;    display: inline-block;margin-top: 4%;margin-left: 3%;">物品规格：</p>
        <div style="    display: flex;flex-wrap: wrap;">
          <div class="er6">2kg以内</div>
          <div class="er6">2kg以内</div>
          <div class="er6">2kg以内</div>
          <div class="er6">衣服类</div>
          <div class="er6">衣服类</div>
          <div class="er6">衣服类</div>
          <div class="er6"></div>
          <div class="er6"></div>
          <div class="er6"></div>
          <div class="er6"></div>
          <div class="er6"></div>
          <div class="er6"></div>
        </div>
      </div>

      <div class="erwu">
        <div style="float:left;margin-left: 7%;margin-top: 5%;">配送费用：</div>
        <span style="border:0;color:#ccc;display: inline-block;margin-top: 5%;">超出三公里没三公里加3元哦!
        </span>
        <van-icon
          name="gold-coin"></van-icon>
      </div>
    </div>

    <div class="san">
      <div class="san1">
      <span>
         <van-icon
           name="gold-coin"
           color="#f00"></van-icon>&nbsp&nbsp&nbsp&nbsp
        <span style="color:#f00">:8.00</span>
      </span>
        <span>
        <span>费用明细</span>

       <van-icon
         name="arrow"></van-icon>
      </span>

      </div>
      <div style="width:119px;line-height: 47px;text-align: center;background:#000;color:#fff">确认下单</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Bwsxlfb",
    data() {
      return {

      }
    },
    methods: {
      fanhui(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .yi{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-icon-chat{
    margin-right: 15px;
  }
  .van-icon-arrow-left{
    margin-left: 15px;
  }
  .er{
    background: #f2eef4;

  }
  .eryi{
    width:90%;
    height:120px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
  }
  .erer{
    width:90%;
    height:100px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
  }
  .er21{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    float:left;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    margin-left: 5%;
  }
  .er22{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    float:left;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    margin-left: 5%;
  }
  .ersi{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin-left: 5%;
    border:0;
    font-size: 12px;

  }
  .er .van-icon-arrow{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .van-icon-gold-coin-o{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .erwu{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
    font-size: 12px;
  }
  .erliu{
    width:90%;
    height:27%;
    background:#fff;
    border-radius: 4px;
    margin: 0 0 4% 5%;
    border:0;
    font-size: 12px;
  }
  .er6{
    width: 25%;
    height: 20px;
    border: 1px solid #000;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    margin-top: 2%;
    margin-left: 6%;

  }
  .san{
    display: flex;
    height:57px;
    border-top:2px solid #ccc;
    background: #fff;
    justify-content: space-between;
  }
  .erwu .van-icon-gold-coin{
    float: right;
    line-height: 60px;
    margin-right: 5%;
  }
  .san1 .van-icon-gold-coin{
    position: absolute;
  }
  .san1{
    display: flex;
    justify-content: space-around;
    width:60%;
    align-items: center;
  }
  .qusj{width: 20%; border:0; float:left;margin-top:5%;margin-left: 7%}
  .sdsj{width: 27%; border:0; float:left;margin-top: 5%;margin-left: 7%}
</style>
